<!DOCTYPE html>
<html lang="en">
  <head>
	<title>Navbar Template for Bootstrap</title>
          <?php include 'includes/header.php'; ?>
   </head>
      <body>
          
<!--	<div id="dialog-modal" title="Basic modal dialog" style="display: none;">
		<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
	</div>-->
    
    <div class="container">
    
	<?php include 'includes/navbar.php';?>   

      <!-- Main component -->
      <div class="jumbotron">
        <h1>Add task </h1>
        <p>Task Information.</p>
        <p>
            <fieldset>
                <label>Category :</label>
                <input type="text" placeholder="Type something…" id="category"/>
                <br>
                <label>Action  :</label>
                <input type="text" placeholder="Type something…" id="action"/>
                <br>
                <label>date  :</label>
                <input type="text" placeholder="Type something…" id="datepicker"/>
                <br>
                <label>Duration  :</label>
                <input type="text" placeholder="Type something…" id="duration"/>
                <br>
                   <label>Comment :</label>
                   <textarea id="comment" rows="3"></textarea>
                 <br>
                <button type="submit" class="btn btn-primary" id="savingTask">Saving</button>
            </fieldset>
				<label>delete Task :</label> 
				<input type="text" placeholder="Type something" id="idTask" />
              <button type="submit" class="btn btn-primary" id="delete">Delete</button>
          <!--<a id="test" class="btn btn-lg btn-primary" role="button">Test jquery ui</a>-->
          <!--<input type="text" value="Input test"/>-->
        </p>
      </div>

    </div> <!-- /container -->
    <?php include 'includes/footer.php';?>	
	
    <!-- scripts -->
    <script>
    $(function() {
    	$( "#datepicker" ).datepicker({
    	showOn: "button",
    	buttonImage: "images/calendar.gif",
    	buttonImageOnly: true
    	});
    	});
		$('#savingTask').click(function(){
			var values={
				"functionName" : 'addTask',                        
				"category"     : $("#category").val(),
				"action"       : $("#action").val(),
     			"date"         : $("#datepicker").val(),
				"duration"     : $("#duration").val(),
				"comment"      : $("#comment").val()
		};
			$.ajax({
				url : "Controller.php",
				data : values,
				type : 'POST',
				success : function(response){
					console.log(response);
				},
				error : function(errorObject){ 
					console.log(errorObject);
				}
			});
		});
		
		/* Delete task */
		$('#delete').click(function(){
			var values={
				"functionName" : 'deleteTask',                        
				"idTask"     :$("#idTask").val(),
			};
			
			$.ajax({
				url : "Controller.php",
				data : values,
				type : 'POST',
				success : function(response){
					console.log(response);
				},
				error : function(errorObject){ 
					console.log(errorObject);
				}
			});
		});
		
    </script>
    </body>
</html>
